body {
  background-color: #F5F6F7;
}

.category-title{
  font-size: 35rpx;
  font-weight: bold;
  margin: 10rpx 10rpx 10rpx 25rpx;
  padding: 10rpx;
  height: 50rpx;
}

.category-img{
  width: 40rpx;
  height: 40rpx;
  margin-top: 10rpx;
  margin-right: 10rpx;
}

.category-text{
  position: relative;
  top: -8rpx;
  margin-left: 7rpx;
}

.card-list{
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 定义两列 */
  gap: 35rpx; /* 卡片之间的间距 */
  margin: 35rpx;
}

.view-card {
  height: 235px; /* 卡片高度 */
  background-color: #e4f0ff; /* 卡片背景颜色 */
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
  border-radius: 25rpx;
  padding: 30rpx;
}

.view-card-lock{
  height: 200px; /* 卡片高度 */
  background-color: #fff; /* 卡片背景颜色 */
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
  border-radius: 25rpx;
  color: gray;
  padding: 30rpx;
  opacity: 0.7;
}

.medal-name{
  font-size: 35rpx;
  font-weight: bold;
  color: #3376F2;
}

.page-bottom{
  height: 100rpx;
}

.medal-icon{
  font-size: 50rpx;
  margin-bottom: 20rpx;
}

.medal-description{
  font-size: 26rpx;
  color: gray;
  margin-top: 22rpx;
}

.medal-date{
  font-size: 23rpx;
  color: #3376F2;
  margin-top: 24rpx;
}

.lock-icon{
  width: 40rpx;
  height: 40rpx;
  position: relative;
  top: -180rpx;
  left: 220rpx;
}
